// 阿里云oss图片转webp工具类
//如果使用其他服务如腾讯云等可查看其他文档

/**
 *
 * 阿里云上的图片转webp工具
 *
 * 使用示例：
 * 1.在头部引入：
 * import { turnWebp, turnScreenWidthWebp } from '@ohos/libUtils';
 * 2.在相关逻辑中使用：
 * Image(turnWebp("https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg"))
 *
 */

let res = uni.getSystemInfoSync()
					
export const screenPxWidth = res.screenWidth * res.pixelRatio
export const halfScreenPxWidth = screenPxWidth / 2
export const oneThirdScreenPxWidth = screenPxWidth / 3

console.log("utils-screenPxWidth:", oneThirdScreenPxWidth)

//其他效果（高斯模糊、旋转、加水印、获取主色调等）参考链接：https://help.aliyun.com/zh/oss/user-guide/resize-images-4?spm=a2c4g.11186623.0.0.58a53048DtK81c

/**
 * 获取webp图片；
 * 示例：https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/format,webp
 *
 * @param url 图片链接
 * @returns 处理之后的图片链接
 */
export function turnWebp(url) {
  if (!url || url?.length === 0 || url?.indexOf("?") > 0) {
    return url
  }
  return url + "?x-oss-process=image/format,webp"
}

/**
 * 根据width获取等比缩放后的webp图片；
 * 示例：https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100,m_lfit/format,webp
 *
 * @param url 图片链接
 * @param width 目标宽度
 * @returns 处理之后的图片链接
 */
export function turnWebpWithWidth(url, width) {
  if (!url || url.length === 0 || url.indexOf("?") > 0) {
    return url
  }
  return url + `?x-oss-process=image/resize,w_${width},m_lfit/format,webp`
}

/**
 * 根据height获取等比缩放的webp图片；
 * 示例：https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_100,m_lfit/format,webp
 *
 * @param url 图片链接
 * @param height 目标高度
 * @returns 处理之后的图片链接
 */
export function turnWebpWithHeight(url, height) {
  if (!url || url.length === 0 || url.indexOf("?") > 0) {
    return url
  }
  return url + `?x-oss-process=image/resize,h_${height},m_lfit/format,webp`
}

/**
 * 根据宽高获取webp图片，等比缩放至短的一边填充尺寸，剪切多余部分；
 * 示例：https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fill,h_100,w_100/format,webp
 *
 * @param url 图片链接
 * @param width 目标宽度
 * @param height 目标高度
 * @returns 处理之后的图片链接
 */
export function turnWebpWithWidthHeight(url, width, height) {
  if (!url || url.length === 0 || url.indexOf("?") > 0) {
    return url
  }
  return url + `?x-oss-process=image/resize,m_fill,h_${height},w_${width}/format,webp`
}

/**
 * 根据宽高获取获取等比缩放后短边填充满尺寸的圆角webp图片，cornerRadius传的比较大时可实现圆形效果；
 * 示例：https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fill,h_100,w_100/rounded-corners,r_100/format,webp
 *
 * @param url 图片链接
 * @param width 目标宽度
 * @param height 目标高度
 * @param cornerRadius 四个角的圆角
 * @returns 处理之后的图片链接
 */
export function turnWebpRoundWithWidthHeight(url, width, height,
  cornerRadius) {
  if (!url || url.length === 0 || url.indexOf("?") > 0) {
    return url
  }
  return url + `?x-oss-process=image/resize,m_fill,h_${height},w_${width}/rounded-corners,r_${cornerRadius}/format,webp`
}

/**
 * 将图片转换为屏幕宽度尺寸webp（按比例缩放）；参考方法： turnWebpWithWidth()}
 *
 * @param url 处理之后的图片链接
 */
export function turnScreenWidthWebp(url) {
  return turnWebpWithWidth(url, screenPxWidth)
}

/**
 * 将图片转换为一半屏幕宽度尺寸webp（按比例缩放）；参考方法： turnWebpWithWidth()}
 *
 * @param url 处理之后的图片链接
 */
export function turnHalfScreenWidthWebp(url) {
  return turnWebpWithWidth(url, halfScreenPxWidth)
}

/**
 * 将图片转换为三分之一屏幕宽度尺寸webp（按比例缩放）；参考方法： turnWebpWithWidth()}
 *
 * @param url 处理之后的图片链接
 */
export function turnOneThirdScreenWidthWebp(url) {
  return turnWebpWithWidth(url, oneThirdScreenPxWidth)
}